<template>
    <el-row>
        <el-col :span="4" style="border-right: 1px solid rgb(239, 240, 240);">
            <div style="background-color: rgb(250, 250, 250);height: 100vh;position: relative;">
                <img @click="goUserInfo" :src="userInfo.userAvatar" />
                <Logo name="要考" style="padding: 20px 10px;" />
                <div class="search">
                    <i class="el-icon-search"></i>
                    <input v-model="key" @keyup.enter="keyEnter" placeholder="搜索试卷" />
                </div>
                <div style="padding: 10px;box-sizing: border-box;">
                    <div v-if="route.show === undefined"
                        :style="{ backgroundColor: selectedMenu.path === route.path ? 'rgb(239, 240, 240)' : 'rgb(250, 250, 250)', color: selectedMenu.path === route.path ? '#000' : '#333' }"
                        @click="menuClick(route)" class="route-menu" v-for="(route, index) in userRoutes" :key="index">
                        <span>
                            <i :class="route.icon"></i>
                            {{ route.name }}
                        </span>
                    </div>
                </div>
                <div class="login-out" @click="loginout">
                    <i class="el-icon-s-fold"></i>
                    退出登录
                </div>
            </div>
        </el-col>
        <el-col :span="20">
            <div style="padding: 20px 40px;">
                <span @click="noticeReading">
                    <i class="el-icon-bell"></i>
                    {{ notice.name }}
                </span>
            </div>
            <div style="padding: 10px 40px 10px 40px;box-sizing: border-box;font-size: 18px;">
                {{ selectedMenu.name }}
            </div>
            <div>
                <router-view></router-view>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import Logo from '@/components/Logo.vue';
export default {
    components: {
        Logo,
    },
    data() {
        return {
            userRoutes: [],
            selectedMenu: {},
            userInfo: { userAvatar: '' },
            activeName: 'first',
            key: '',
            noticeList: [],
            notice: {},
            index: 0
        }
    },
    created() {
        this.loadRouter();
        this.tokenCheckLoad();
        this.loadNotice();
    },
    methods: {
        noticeReading() {
            this.menuClick(this.userRoutes.find(entity => entity.path === '/noticeReading'));
            sessionStorage.setItem('noticeInfo', JSON.stringify(this.notice));
            if (this.$router.currentRoute.fullPath == '/noticeReading') {
                sessionStorage.setItem('noticeInfo', JSON.stringify(this.notice));
                return;
            }
            this.$router.push('/noticeReading');
        },
        listenerNotice() {
            setInterval(() => {
                this.index++;
                if (this.index > this.noticeList.length) {
                    this.index = 0;
                }
                this.notice = this.noticeList[this.index];
            }, 5000)
        },
        async loadNotice() {
            try {
                const response = await this.$axios.post('notice/query', {});
                const { data } = response;
                this.noticeList = data.data;
                this.totalItems = data.total;
                this.notice = this.noticeList[0];
                this.listenerNotice();
            } catch (error) {
                console.error('查询公告信息异常:', error);
            }
        },
        keyEnter() {
            this.selectedMenu = this.userRoutes.find(entity => entity.path === '/search');
            sessionStorage.setItem('searchKey', this.key);
            if (this.$router.currentRoute.fullPath == '/search') {
                return;
            }
            this.$router.push('/search');
        },
        async loginout() {
            const confirmed = await this.$swalConfirm({
                title: '退出登录',
                text: `退出后需要重新登录`,
                icon: 'info',
            });
            if (confirmed) {
                this.$swal.fire({
                    title: '退出登录',
                    text: '退出成功',
                    icon: 'success',
                    showConfirmButton: false,
                    timer: 1000,
                });
                sessionStorage.setItem('token', '');
                this.$router.push('/login');
            }
        },
        listenerUserInfo() {
            setInterval(() => {
                const storageUser = sessionStorage.getItem('userInfo');
                const userInfo = JSON.stringify(this.userInfo);
                if (storageUser === userInfo) {
                    return;
                }
                this.userInfo = JSON.parse(storageUser);

            }, 1000);
        },
        goUserInfo() {
            this.menuClick(this.userRoutes.find(entity => entity.path === '/my'));
            this.$router.push('/my');
        },
        tokenCheckLoad() {
            this.$axios.get('user/auth').then(response => {
                const { data } = response;
                if (data.code === 400) {
                    this.$message.error(res.data.msg);
                    this.$router.push('/login');
                    return;
                }
                this.userInfo = data.data;
                sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo));
                this.listenerUserInfo();
            })
        },
        menuClick(route) {
            this.selectedMenu = route;
            if (this.$router.currentRoute.fullPath == route.path) {
                return;
            }
            this.$router.push(route.path);
        },
        loadRouter() {
            let menus = this.$router.options.routes.filter(route => route.path == '/user')[0];
            this.userRoutes = menus.children;
            this.menuClick(this.userRoutes[0]);
        },
    }
};
</script>

<style scoped lang="scss">
.operation-btn {
    padding: 8px 10px;
    background-color: rgb(235, 237, 245);
    color: rgb(43, 121, 203);
    float: right;
    border: none;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}

.pwd {
    outline: none;
    margin: 10px 2px;
    border: 1px solid #fff;
    font-size: 16px;
}

img {
    padding: 5px;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 15px;
    top: 15px;
    border-radius: 20px;
}

img:hover {
    background-color: rgb(165, 173, 246);
}

.search {
    margin: 0 10px;
    padding: 8px 10px 10px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: rgb(239, 240, 240);

    i {
        width: 10px;
        height: 10px;
        width: 10%;
    }

    input {
        width: 80%;
        outline: none;
        border: 0;
        padding: 0 5px;
        background-color: rgb(239, 240, 240);
    }
}

.route-menu {
    display: inline-block;
    line-height: 35px;
    padding: 0 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    font-size: 14px;
    width: 95%;
    cursor: pointer;
    color: rgb(108, 109, 109);
}

.login-out {
    padding: 10px 20px;
    margin: 0 10px;
    line-height: 15px;
    font-size: 14px;
    position: absolute;
    box-sizing: border-box;
    border-radius: 5px;
    bottom: 10px;
}

.login-out:hover {
    width: 92%;
    background-color: rgb(239, 240, 240);
    cursor: pointer;
}
</style>